<template>
  <div class="myFocus">
    <van-nav-bar
      :border="false"
      title="我的关注"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <div class="item" v-for="item in userInfo" :key="item.id">
      <div class="circle">
        <img
          v-if="item.head_img"
          :src="$axios.defaults.baseURL + item.head_img"
          alt
        />
      </div>
      <div class="news">
        <div class="content">{{ item.nickname }}</div>
        <div class="date">2020-9-22</div>
      </div>
      <button class="botton" @click="handelClick(item.id)">取消关注</button>
    </div>

    <!-- <van-pagination
      v-model="currentPage"
      :page-count="15"
      :total-items="15"
      :items-per-page="7"
    /> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: [],
      currentPage: 1,
    };
  },
  created() {
    // this.$axios({
    //   url: "/user_follows/45",
    //   headers: {
    //     Authorization: "Bearer " + localStorage.getItem("token"),
    //   },
    // }).then((res) => {
    //   //   console.log(res.data.data);
    //   this.userInfo = res.data.data;
    //   console.log(this.userInfo);
    // });

    this.loadPage();
  },
  //封装页面刷新时获取数据
  methods: {
    loadPage() {
      this.$axios({
        url: "/user_follows/",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        //   console.log(res.data.data);
        this.userInfo = res.data.data;
        console.log(this.userInfo);
      });
    },
    //处理点击取消关注事件
    handelClick(userId) {
      this.$axios({
        url: "/user_unfollow/" + userId,
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res.data.message);
        if (res.data.message == "取消关注成功") {
          this.loadPage();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.myFocus {
  background-color: papayawhip;
  height: 100%;
  .van-nav-bar {
    //组件背景颜色不设置
    background-color: unset;
  }
  .item {
    display: flex;
    padding: 20/360 * 100vw;
    border-bottom: 1px solid #ccc;
    .circle {
      width: 40/360 * 100vw;
      height: 40/360 * 100vw;
      background-color: saddlebrown;
      border-radius: 50%;
      margin-right: 20/360 * 100vw;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .news {
      flex: 1;
      .content {
        font-size: 18/360 * 100vw;
      }
      .date {
        font-size: 15/360 * 100vw;
        color: #7b888f;
      }
    }
    .botton {
      outline: none;
      border: none;
      width: 73/360 * 100vw;
      height: 30/360 * 100vw;
      background-color: pink;
      border-radius: 15/360 * 100vw;
      font-size: 14/360 * 100vw;
      margin-top: 8/360 * 100vw;
    }
  }
}
</style>